<div class="wccbody" #body>

    <!-- 头部 -->
    <mat-toolbar class="header"  [cdkContextMenuTriggerFor]="header_menu">
        
        <span style="margin: 2px 4px; display: flex; align-items: center;">
          <img style="height: 24px;"  *ngIf="iconUrl" [src]="iconUrl" alt="icon" class="icon" /> 
          <mat-icon  *ngIf="!!!iconUrl" aria-hidden="false" aria-label="" fontIcon="web"></mat-icon>
        </span>

            <span cdkDragHandle class="spacer">
  {{ title ? (title.length > 25 ? (title.substring(0,25) + '...') : title) : '未命名窗口' }}
</span> 
            <button mat-icon-button (click)="sizeMin.emit(id)">
                <mat-icon aria-hidden="false" aria-label="" fontIcon="minimize"></mat-icon>
            </button>
            <button mat-icon-button *ngIf="!isSizeMax" (click)="_sizeMax()" >
                <mat-icon aria-hidden="false" aria-label="" fontIcon="fullscreen"></mat-icon>
            </button>
            <button mat-icon-button  *ngIf="isSizeMax" (click)="_sizeCommon()">
                <mat-icon aria-hidden="false" aria-label="" fontIcon="fullscreen_exit"></mat-icon></button>
            <button mat-icon-button (click)="close.emit(id)" >
                <mat-icon aria-hidden="false" aria-label="" fontIcon="close"></mat-icon>
            </button>
    </mat-toolbar> 
    <!-- 工具栏 -->
    <mat-toolbar class="tool-bar" *ngIf="false" (contextmenu)="$event.preventDefault()">
        <button mat-icon-button *ngIf="false" (click)="back()">
            <mat-icon aria-hidden="false" aria-label="" fontIcon="arrow_back"></mat-icon>
        </button>
        <button mat-icon-button *ngIf="false" (click)="forward()" >
            <mat-icon aria-hidden="false" aria-label="" fontIcon="arrow_forward"></mat-icon>
        </button>
        <button mat-icon-button (click)="refresh()" >            
            <mat-icon aria-hidden="false" aria-label="" fontIcon="refresh"></mat-icon>
        </button>
        <span class="spacer" ></span>
        <button mat-icon-button  *ngIf="false" >
            <mat-icon aria-hidden="false" aria-label="" fontIcon="settings"></mat-icon>
        </button> 
    </mat-toolbar>
    <!-- 内容展示 -->
    <div class="content">
        <div *ngIf="!isActive" class="content-nonActive" ></div>
        <iframe #page [src]="url | safeUrl" frameborder="0" width="100%" height="100%"></iframe>
    </div>

</div>

<ng-template #header_menu>
    <div class="menu" cdkMenu>  
        <button class="menu-item"  cdkMenuItem (click)="openOnBrowserTab()">浏览器打开</button>    
        <button class="menu-item"  cdkMenuItem (click)="refresh()"  >刷新</button>     
     </div>
</ng-template>